<template>
  <div class="animated fadeIn">
    <div class="row">
      <div class="col-lg-12">
        <b-card :header="header">
          <el-form label-width="120px" ref="form" :rules="rules" :model="cForm">
            <el-form-item label="选择">
              <pro-cascader hide-lv4 @lv2-change="handleLv2Change" :c1.sync="c1" :c2.sync="c2" />
            </el-form-item>
            <div v-if="c2">
              <el-form-item label="GoodsID" prop="goodsid">
                <el-input v-model="cForm.goodsid" class="short"></el-input>
              </el-form-item>
              <el-form-item label="名称" prop="name">
                <el-input v-model="cForm.name" class="short"></el-input>
              </el-form-item>
              <el-form-item label="产品图片" prop="image">
                <upload-image :src="src" :upload="handleUploadImg" size="small"></upload-image>
              </el-form-item>
              <el-form-item label="Icons">
                <icon-selector :iconStr.sync="cForm.icon"></icon-selector>
              </el-form-item>
              <el-form-item label="PDF图片" prop="pdfimage">
                <upload-image :src="pdf" :upload="handleUploadPdfImg" size="small"></upload-image>
              </el-form-item>
              <el-form-item label="PDF文件" prop="pdf">
                <upload-file :on-change="handleUploadPdf"></upload-file>
              </el-form-item>
              <el-form-item label="电子书地址" prop="pdfbook">
                <el-input v-model="cForm.pdfbook" class="middle"></el-input>
              </el-form-item>
              <el-form-item label="视频地址">
                <el-input class="middle" v-model="cForm.movie"></el-input>
              </el-form-item>
              <el-form-item label="特点">
                <el-input class="middle" :rows="5" type="textarea" v-model="cForm.features"></el-input>
              </el-form-item>
              <el-form-item label="规格">
                <el-input class="middle" :rows="5" type="textarea" v-model="cForm.specifications"></el-input>
              </el-form-item>
              <el-form-item label="特殊用途">
                <el-input class="middle" :rows="5" type="textarea" v-model="cForm.specificUse"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input class="middle" :rows="5" type="textarea" v-model="cForm.remarks"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="handleSubmitClick">提交</el-button>
                <el-button plain>取消</el-button>
              </el-form-item>
            </div>
          </el-form>
        </b-card>
      </div>
    </div>
  </div>
</template>

<script>
  import ProCascader from '@/components/ProCascader.vue'
  import UploadImage from '@/components/UploadImage.vue'
  import UploadFile from '@/components/UploadFile'
  import IconSelector from '@/components/IconSelector.vue'
  /* eslint-disable */
  import { handleSubmitData, html2Plain, plain2Html } from '../../utils/filter-data'
  import { delay } from '../../utils/common-tools'
  import {
    uploadPicToDir,
    addGoodsId,
    getProDetailByGoodsId
  } from '../../service/api'
  import { mapState } from 'vuex'
  export default {
    name: 'add-goods',
    components: {
      ProCascader,
      UploadImage,
      IconSelector,
      UploadFile
    },
    data () {
      return {
        cForm: {},
        /* add | edit | view */
        mode: 'edit',
        editingGoodsId: '',
        /* class1, class2 */
        c1: '',
        c2: '',
        rules: {
          goodsid: [{ required: true }],
          name: [{ required: true }],
          image: [{ required: true }],
          pdfimage: [{ required: true }],
          pdf: [{ required: true }],
          pdfbook: [{ required: true }]
        }
      }
    },
    computed: {
      src () {
        return `${this.$apath}lv4/${this.c1}/${this.cForm.image}`
      },
      pdf () {
        return `${this.$apath}pdf_png/${this.c1}/${this.cForm.pdfimage}`
      },
      ...mapState('ci', ['lv1', 'lv2']),
      class1name () {
        if (this.c1n) return this.c1n
        const v = this.lv1.find(v => v.class1 === this.c1)
        return (v && v.class1name) || ''
      },
      class2name () {
        if (this.c2n) return this.c2n
        const v = this.lv2[this.c1].find(v => v.class2 === this.c2)
        return (v && v.class2name) || ''
      },
      header () {
        return `<i class='fa fa-align-justify'></i> ${this.mode === 'edit' ? '编辑' : '添加'}GoodsId`
      }
    },
    methods: {
      handleLv2Change (v) {
        console.log(v)
      },
      /* 用户点击提交 */
      async handleSubmitClick () {
        this.$refs['form'].validate(async valid => {
          if (!valid) return
          if (this.mode === 'edit') {
            this.$confirm('确定更新该数据么', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消'
            }).then(() => {
              this.handleSubmit()
            }).catch(e => {
              console.log(e)
            })
          } else {
            this.handleSubmit()
          }
        })

      },
      async handleSubmit () {
        const text = handleSubmitData(this.cForm)
        const { data, err } = await addGoodsId({
          ...this.cForm,
          ...text,
          class1: this.c1,
          class2: this.c2,
          class1name: this.class1name,
          class2name: this.class2name
        })
        if (err || data.code !== 200) {
          this.$message.error('操作失败，请稍后再试')
          return
        }
        this.$message.success('操作成功')
        await delay(500)
        this.$router.go(-1)
      },
      async handleUploadImg (file) {
        const { data } = await uploadPicToDir({
          photo: file,
          filePath: `${this.$upath}lv4/${this.c1}/`
        })
        this.uploadCpl(data, 'image')
      },
      async handleUploadPdf (file) {
        const { data } = await uploadPicToDir({
          photo: file,
          filePath: `${this.$upath}pdf/${this.c1}/`
        })
        this.uploadCpl(data, 'pdf')
      },
      async handleUploadPdfImg (file) {
        const { data } = await uploadPicToDir({
          photo: file,
          filePath: `${this.$upath}pdf_png/${this.c1}/`
        })
        this.uploadCpl(data, 'pdfimage')
      },
      uploadCpl (data, field) {
        if (!data || +data.code !== 200) {
          this.$message.error('上传失败')
          return
        }
        this.cForm = { ...this.cForm, [field]: data.result }
      },
      /* 编辑模式下,获取产品信息 */
      async fetchEditing (id) {
        const { data, err } = await getProDetailByGoodsId(id)
        if (err || data.code !== 200) return
        const res = data.result
        this.c1 = res.class1
        this.c2 = res.class2
        this.c1n = res.class1name
        this.c2n = res.class2name
        this.cForm = {
          goodsid: res.goodsid,
          name: res.name,
          image: res.image,
          pdfimage: res.pdfimage,
          pdf: res.pdf,
          pdfbook: res.pdfbook,
          movie: res.movie,
          icon: res.icon,
          features: html2Plain(res.features),
          specifications: html2Plain(res.specifications),
          specificUse: html2Plain(res.specificUse),
          remarks: html2Plain(res.remarks)
        }
      }
    },
    created () {
      const { id, view } = this.$route.query
      this.editingGoodsId = id || ''
      if (!id) {
        this.mode = 'add'
      } else if (view) {
        this.mode = 'view'
      }
      if (this.mode === 'edit') {
        this.fetchEditing(id)
      }
    }
  }
</script>
<style type="text/scss" rel="stylesheet/scss" lang="scss" scoped>
  @import '../../styles/common';
  .form-control {
    display: inline-block;
    width: 95%;
  }
  .short {
    width: 300px;
  }
</style>
